<!-- cmx 12.03修改昵称页面 -->
<template>
	<!-- cmx 12.03修改昵称页面 -->
	<view class="container">
		<view class="nickname-form">
			<uni-forms ref="formRef" :model="form" :rules="rules">
				<uni-forms-item name="newNickname">
					<input type="text" placeholder="请输入新昵称" v-model="form.newNickname" />
				</uni-forms-item>
				<button formType="submit" @click="saveNickname">保存</button>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const form = ref({}); // 使用ref来存储新的昵称
	const formRef = ref();
	const rules = ref({
		newNickname: {
			rules: [{
				required: true,
				errorMessage: '用户名不能为空'
			}, {
				minLength: 2,
				maxLength: 15,
				errorMessage: '用户名长度在1~15之间'
			}]
		}
	})
	
const saveNickname = async () => {
  // 假设userId是要传递的id
 // 这里的'1'应该替换为实际的用户ID

  // try {
    // 验证表单
    const isValid = await formRef.value.validate();
    if (!isValid) {
      console.error('表单验证失败');
      return;
    }

    // 发送请求更新用户名
	try {
	  const value =JSON.parse(uni.getStorageSync('id'));
	  if (value[0]  && value[0].id) {
	    const userId = value[0].id;
	    console.log(userId);
		const res = await uni.request({
		  url: `http://localhost:8080/user/update`, // 使用模板字符串构建URL
		  method: 'get', // 通常更新操作使用get方法
		  header: {
		      'content-type': 'application/x-www-form-urlencoded' // 设置内容类型为表单数据
		  },
		  data: {
		    id: userId,
		    username: form.value.newNickname
		  },
		  success: (res) => {
		  		console.log(res.data); // 成功回调
		  		console.log(res);
		  		uni.reLaunch({
		  			url:"/pages/account/settings"
		  		})
		  	},
		  	fail: (err) => {
		  		console.error(err); // 失败回调
		  	}
		});
	  } else {
	    console.log('存储中没有找到有效的用户ID');
	  }
	} catch (error) {
	  console.error('从存储中获取用户ID时出错', error);
	}
}	

</script>

<style>
	.container {
		padding: 20px 0;
	}

	.nickname-form {
		margin-top: -15px;
	}

	input {
		margin: 10px 0;
		padding: 10px 10px;
		height: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 14px;
		vertical-align: middle;
		box-sizing: border-box;
		background-color: white;
	}

	button {
		background-color: #4CAF50;
		color: white;
		border: none;
		cursor: pointer;
		margin-top: 30px;
		margin-left: 10px;
		margin-right: 10px;
	}

	button:hover {
		background-color: #45a049;
		color: white;
	}
</style>